<script>
import store from '../store'
import { mapState } from 'vuex'

export default {
    name:'TextBoard',
    data () {
        return {
            content: '',
            showReply: false,
        }
    },
    methods: {
        onKeyup (e) {//发送消息
            if (e.keyCode === 13 && this.content.length) {
            var new_msg={
                content:this.content,
                date:new Date(),
                self:true
            }
            let session=store.state.chatList.find(a=>a.userId===store.state.selectId)
            session.msg.push(new_msg)
            this.$parent.$parent.sending(this.content,store.state.selectId)
            this.content=""
            }
        }
    },
    computed:{
        ...mapState([
            'replies',
            'selectId'
        ])
    }
};
</script>

<template>
    <div class="text" >
        <div class="textbar">
            <button @click="showReply=!showReply" class="replies" :disabled=" selectId === ''">快捷回复</button>
            <transition name="showbox">
                <div class="replyBox" v-show="showReply">
                    <li v-for="(item,index) in replies">
                        <p>{{index}},{{item}}</p>
                    </li>
                </div>
            </transition>
        </div>
        <textarea placeholder="按 Enter 发送" v-model="content" @keyup="onKeyup" :disabled=" selectId === ''"></textarea>
    </div>
</template>

<style lang="less" scoped>
.text {
    height: 159px;
    width: 659px;
    border-top: solid 1px #ddd;
    border: 1px solid;
    textarea {
        padding: 10px;
        height: 118px;
        width: 639px;
        border: none;
        outline: none;
        font-family: "Micrsofot Yahei";
        resize: none;
    }
    .textbar{
        width: 659px;
        height: 21px;
        background-color: rgb(255, 255, 255);
        .replies{
            display: inline-block;
            white-space: nowrap;
            cursor: pointer;
            background: #fff;
            border: 1px solid #dcdfe6;
            border-color: #dcdfe6;
            color: #606266;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            transition: .1s;
            font-weight: 500;
        }
        .replyBox{
            position: absolute;
            display: flex;
            flex-wrap: warp;
            background-color: #fff;
            // top: -210px;
            // left: -100px;
            width: 300px;
            height: 200px;
            padding: 5px;
            border: 1px solid #d1d1d1;
            border-radius: 2px;
            box-shadow:0 1px 2px 1px #d1d1d1;
            &.showbox-enter-active, &.showbox-leave-active{
                transition: all .5s;
            }
            &.showbox-enter,&.showbox-leave-active{
                opacity: 0;
            }        
        }
    }
}
</style>